<template>
  <div class="center-item-content card-color card-margin content-margin" >
    <div class="box-card">
      <div slot="header" class="clearfix">
        <h5><i class="el-icon-star-on"></i>推荐列表<i class="el-icon-star-on"></i></h5>
        <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
      </div>
      <div style="display: flex;flex-direction: column;">
<!--        <el-button @click="ad2d">66666</el-button>-->
<!--        <transition-group-->
<!--          name="staggered-fade"-->
<!--          tag="div"-->
<!--          v-bind:css="false"-->
<!--          v-on:before-enter="beforeEnter"-->
<!--          v-on:enter="enter"-->
<!--          v-on:leave="leave"-->
<!--        >-->
<!--          <div-->
<!--            class="recommend recommend-item"-->
<!--            v-for="(item, index) in noteComments"-->
<!--            v-bind:key="item.id"-->
<!--            v-bind:data-index="index"-->
<!--          >{{ item.name }}</div>-->
<!--        </transition-group>-->
        <transition-group
          name="staggered-fade"
          tag="div"
          v-bind:css="false"
          v-on:before-enter="beforeEnter"
          v-on:enter="enter($event,done)"
          v-on:leave="leave"
        >
          <div
            class="recommend recommend-item"
            v-for="(item, index) in noteComments"
            v-bind:key="item.id"
            v-bind:data-index="index"
          >{{ item.name }}</div>
<!--        <item class="recommend recommend-item" v-for="item in noteComments" :noteComment="item" :key="item.id" @setCallback="setCallback">-->
<!--          {{item.content}}-->
<!--        </item>-->
        </transition-group>

        <div v-show="more" style="height:50px;line-height:50px;" class="comment-background hand" @click="clickToMore">
          <el-button type="text" icon="el-icon-more">更多</el-button>
        </div>
        <div v-show="!more" style="height:50px;line-height:50px;" class="comment-background">
          ~~~我也是有底线的~~~
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import request from '@/utils/request'
import item from './item'
import Velocity from 'velocity'
export default {
  components: {
    item
  },
  props: {
    note: {
      type: Object,
      default: () => {}
    }
  },
  name: 'content',
  data: function () {
    return {
      page: {
        'size': 5,
        'current': 1
      },
      noteComments: [],
      noteComment: {
        level: 1,
        parent: ''
      },
      Reply: false,
      ReplyName: '',
      more: true,
      computedList: [
        { msg: 'Bruce Lee' },
        { msg: 'Jackie Chan' },
        { msg: 'Chuck Norris' },
        { msg: 'Jet Li' },
        { msg: 'Kung Fury' }
      ]
    }
  },
  watch: {
    note: {
      handler: function (note) {
        this.note = note
      },
      immediate: true
    }
  },
  created () {
    this.queryRecommends()
  },
  methods: {
    ad2d: function () {
      this.computedList.push({ msg: 'Bruce Lee' })
    },
    queryRecommends: function () {
      if (!this.note) return
      request({
        url: '/notebook/note/query',
        method: 'post',
        data: this.page
      }).then(res => {
        if (res.result) {
          if (res.data.data && res.data.data.length > 0) {
            res.data.data.forEach(item => {
              this.noteComments.push(item)
            })

            // this.addToArray(this.noteComments, res.data.data)
          } else {
            this.more = false
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { console.log('done') })
    },
    addToArray: function (obj, cur) {
      if (obj && cur.length > 0) {
        obj.push(cur.pop())
        const that = this
        setTimeout(() => that.addToArray(obj, cur), 500)
      }
    },
    clickToMore: function () {
      this.page.current += 1
      this.queryRecommends()
    },
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter: function (el, done, t) {
      var delay = el.dataset.index * 150
console.log(el,done,t)
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 1, height: '120px' },
          { complete: done }
        )
      }, delay)
    },
    leave: function (el, done) {
      var delay = el.dataset.index * 150
      console.log(done)
      setTimeout(function () {
        Velocity(
          el,
          { opacity: 0, height: 0 },
          { complete: done }
        )
      }, delay)
    }
  }
}
</script>

<style>
  .list-complete-item {
    transition: all 1s;
    display: inline-block;
    margin-right: 10px;
  }
  .list-complete-enter, .list-complete-leave-to
    /* .list-complete-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
  }
  .list-complete-leave-active {
    position: absolute;
  }
  .recommend {
    width:100%;
    min-height:80px;
    background-color: white;
    border-bottom: solid 1px #ccc;
    padding: 8px;
    box-sizing: border-box;
  }

  .recommend-item {
    text-align: justify;
    word-break: break-all;
    overflow-wrap: break-word;
  }

  .recommend-item-title :hover {
    color:red;
  }

  .comment-title-interval{
    margin:0 5px;
  }

  .el-divider__text {
    background-color: transparent;
  }

  .comment-background {
    background-color: #ffffffd1;
  }

  .comment-title {
    width:100%;
    display:flex;
    flex-direction: row;
    line-height:36px;
  }

  .comment-title-interval {
    padding-top: 5px;
  }

  /* 当屏幕宽度小于 600px 时 */
  @media screen and (max-width: 700px) {
    .comment-title {
      width:100%;
      display:flex;
      flex-direction: column;
      line-height:36px;
      text-align: center;
    }
  }
</style>
